<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>主页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    
    <!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<script type="text/javascript" src="${path }/resource/js/content.min.js" ></script>
	
<!-- 界面单独引入的其他样式和脚本 -->
<link rel="stylesheet"
	href="${path }/resource/plugin/zTree/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${path }/resource/plugin/zTree/jquery.ztree.core-3.5.min.js"></script>
	
	
</head>

<body class="gray-bg">
<nav class="huiNav">
		<i class="fa fa-home"></i> 首页 <span>&gt;</span>系统管理<span>&gt;</span>功能管理 
		<a  class="btn btn-info  btn-sm pull-right" href="javascript:location.replace(location.href);" title="刷新" ><i class="fa fa-refresh"></i></a>
</nav>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>功能列表</h5>
                        <div class="pull-right ">
                            <a  class="f-r text-success " onclick="openForm()"><i class="fa fa-plus c-success"></i> 添加功能</a>
                        </div>
                    </div>
                    <div id="treeDemo"  class="ibox-content ztree"  style="min-height: 400px">
							
                    </div>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>编辑功能</h5>
                        <div class="ibox-tools">
                        </div>
                    </div>
                    <div class="ibox-content" style="min-height: 400px">
                        <form style="display: none;" class="form-horizontal dataform "  id="dataform">
						<input type="hidden" name="id" id="functionId">
						<div class="form-group">
							<label class="col-sm-1 control-label">父级功能</label>
							<div class="col-sm-3">
								<select class="form-control select2 " size="1" name="parentId" id="parentId">
									<option value="-10" selected="selected">一级功能</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label">功能名称</label>
							<div class="col-sm-3">
								<input id="name" type="text" name="name" class="form-control " datatype="*1-50" nullmsg="功能名称不能为空">
								<div class="Validform_checktip"></div>
							</div>
							<label class="col-sm-1 control-label">功能图标</label>
							<div class="col-sm-3">
								<input datatype="*1-50" id="iconText" name="icon" nullmsg="功能名称不能为空"
									type="text" class="form-control " 
									onclick="showIcon()" >
									<div class="Validform_checktip"></div>
							</div>
						</div>

			<div class="form-group">
				<label class="col-sm-1 control-label">访问路径</label>
				<div class="col-sm-3">
					<input name="functionPath" id="path" type="text" class="form-control" value="" >
				</div>
				
				<label class="col-sm-1 control-label">当前状态</label>
				<div class="col-sm-3">
					<a id='start' onclick="startFunction()" class="btn btn-success form-control-static "
						style="border-radius: 105px;"></a> <a id="stop"
						onclick="closeFunction()" class="btn btn-danger  form-control-static"
						style="border-radius: 105px;"></a>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">排序</label>
				<div class="col-sm-3">
					<input name="sortIndex" type="number" class="form-control" id="sortIndex">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-1 control-label">功能按钮</label>
				<div class="form-control-static col-sm-9" id="btns">
				</div>
			</div>
			<div class="form-group" >
				<div class="col-sm-12 text-center">
					<a class="btn btn-success radius" onclick="updateFunction()" >保存</a>
					<a class="btn btn-danger  radius" onclick="delFunction()" >删除</a>				
				</div>
			</div>
		</form>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <script type="text/javascript">
	
   
   var Huiform = null;
	$(function() {
		$(".select2").select2();
		initFunctionList();
		Huiform = MValidform.validform("#dataform")
	});

	/**
	 * 初始化功能列表
	 */
	function initFunctionSelected(id) {
		$.AjaxProxy({
			a : false,
			c : false
		}).invoke("${path}/developer/function/all", function(loj) {
			$("#parentId").createSelectTree(loj.attr("result").rows, {
				append : false,
				defaultValue:id,
				defaultHtml:'<option value="-10" selected="selected">一级功能</option>'
			});
		});

	}
	
	function initFunctionList() {
		var zNodes = new Array();
		$.AjaxProxy().invoke(
				"${path}/developer/function/all",
				function(loj) {
					for (var i = 0; i < loj.getRowCount(); i++) {
						zNodes[i] = createNode(loj.getString(i, "id"), loj
								.getString(i, "parentId"), loj.getString(i, "name"));
					}
					initTree(zNodes);
				});
	}

	function updateFunction() {
		var myForm=MForm.initForm({
			invokeUrl:"${path}/developer/function/addOrModify",
			afterSubmit:function(){
				initFunctionList();
			},
		});
		myForm.submit();
	}

	function closeFunction() {
		var id = $("#functionId").val();
		if (id != null && id != '') {
			$.AjaxProxy({
				p :{id:id,status:2 }
			}).invoke("${path}/developer/function/addOrModify", function(loj) {
				layer.alert(loj.getValue("info"), {
					icon : 1
				}, function(index) {
					layer.close(index);
					$("#start").html("启用");
					$("#stop").html("已停止");
				});
				return false;
			});
		}
	}

	function startFunction() {
		var id = $("#functionId").val();
		if (id != null && id != '') {

			$.AjaxProxy({
				p :{id:id,status:1 }
			}).invoke("${path}/developer/function/addOrModify", function(loj) {
				layer.alert(loj.getValue("info"), {
					icon : 1
				}, function(index) {
					layer.close(index);
					$("#start").html("启用中");
					$("#stop").html("停止");
				});
				return false;
			});
		}
	}

	function initTree(zNodes) {
		var setting = {
			view : {
				dblClickExpand : false,
				showLine : false,
				selectedMulti : false
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "pId",
					rootPId : ""
				}
			},
			callback : {
				onClick : zTreeOnClick
			}
		};
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	}

	// 点击加载节点信息
	function zTreeOnClick(event, treeId, treeNode) {
		$("#dataform").show();
		Huiform.resetForm();
		$.AjaxProxy({
			p:{id : treeNode.id },
			a : false,
			c : true
		}).invoke(
				"${path}/developer/function/findById",
				function(loj) {
					// 初始化功能基本信息
					
					initFunctionSelected(loj.getString( 0, "parentId"));
					
					$("#functionId").val(loj.getString( 0, "id"));
					$("#name").val(loj.getString( 0, "name"));
					$("#iconText").val(loj.getString( 0, "icon"));
					$("#path").val(loj.getString( 0, "functionPath"));
					$("#sortIndex").val(loj.getString( 0, "sortIndex"));
					if (1 == loj.getString( 0, "status")) {
						$("#start").html("启用中");
						$("#stop").html("停止");
					} else {
						$("#start").html("启用");
						$("#stop").html("已停止");
					}
					// 初始话功能按钮
					$.AjaxProxy({
						p : {id:loj.getString( 0, "id")},
						a : false,
						c : false
					})
							.invoke(
									"${path}/developer/btn/all",
									function(loj2) {
										var html = "";
										for (var i = 0; i < loj2.getRowCount(); i++) {// 全部功能按钮
											var isbtnselect = false;
											if(loj.getString(0,"btns")!=null&&
													(loj.getString(0,"btns")+",").indexOf(loj2.getString(i, "btnValue")+",")!=-1) {
												isbtnselect = true;
											}
											if (isbtnselect) {
												html += '<div class="checkbox checkbox-inline">  <input  name="btns" type="checkbox" id="inlineCheckbox'+ loj2.getString( i, "btnValue") +'" value="'+ loj2.getString( i, "btnValue") +'" checked>   <label for="inlineCheckbox'+ loj2.getString( i, "btnValue") +'"> '+ loj2.getString( i, "btnKey") +' </label> </div>';
											} else {
												html += '<div class="checkbox checkbox-inline">  <input  name="btns" type="checkbox" id="inlineCheckbox'+ loj2.getString( i, "btnValue") +'" value="'+ loj2.getString( i, "btnValue") +'">   		<label for="inlineCheckbox'+ loj2.getString( i, "btnValue") +'"> '+ loj2.getString( i, "btnKey") +' </label> </div>';
											}
										}
										$("#btns").html(html);
									});
				});
	};

	function createNode(id, parentId, name) {
		var o = new Object();
		o.id = id;
		o.pId = parentId;
		o.name = name;
		return o;
	}
	function showIcon() {
		layer.open({
			type : 2,
			title : "选择图标",
			area : [ '80%', '80%' ],
			fix : true, // 不固定
			maxmin : true,
			content : '${path}/common/redirect/icons'
		});
	}

	function delFunction() {
		var id = $("#functionId").val();
		if (id != null && id != '') {
			layer.confirm('删除功能时会删除该功能的所有子功能！', {
				icon : 3,
				title : '提示'
			}, function(index) {
				layer.close(index);
				var id = $("#functionId").val();
				$.AjaxProxy({
					p : {keys: id }
				}).invoke("${path}/developer/function/del", function(loj) {
					layer.alert('删除成功！', {
						icon : 1
					}, function(index) {
						$("#dataform").hide();
						layer.close(index);
						initFunctionList();
					});
					return false;
				});
			});
		} else {
			layer.alert("请先选中要删除的功能！");
		}
	}

	function openForm() {
		layer.open({
			type : 2,
			title : "新增功能",
			maxmin : true,
			area : [ MUI.SIZE_L, '400px' ],
			content : ['${path}/developer/function/editForm']
		});
	}

	
	
	
	</script>
	
</body>
</html>